<template>
  <div class="detail">
    <main>
      <div class="logo">
        <img :src="info.url" alt />
      </div>
      <span class="back" @click="back()">&lt;</span>
      <p class="tit">{{info.tit}}</p>
      <p>
        <span>{{info.sum}}万元&nbsp;&nbsp;{{info.word}}</span><span class="vr" @click="VR(info.id)">VR</span>
      </p>
      <!-- 房源信息 -->
      <div class="housing">
          <h3>房源信息</h3>
          <dl>
              <dt>单价</dt>
              <dd>{{info.price}}/m</dd>
          </dl>
          <dl>
              <dt>朝向</dt>
              <dd>{{info.direction}}</dd>
          </dl>
          <dl>
              <dt>装修</dt>
              <dd>精装修</dd>
          </dl>
          <dl>
              <dt>楼层</dt>
              <dd>高层/共18层</dd>
          </dl>
          <dl>
              <dt>类型</dt>
              <dd>{{info.type}}</dd>
          </dl>
          <dl>
              <dt>更新</dt>
              <dd>刚刚</dd>
          </dl>
      </div>

      <!-- 房源特色 -->
      <div class="features">
          <h3>房源特色</h3>
          <p class="introduce"><span>|</span> 核心卖点</p>
          <p>原始装修 三室两厅一卫 客厅朝阳两卧室朝阳楼层好 苏外名额没用 各出各税</p>

          <p class="introduce"><span>|</span> 业主心态</p>
          <p>业主诚心出售此房，积极配合看房和达成协议后的各项手续。产权清晰无纠纷，看房方便,房主诚意出售</p>

           <p class="introduce"><span>|</span> 服务介绍</p>
           <p>我从事房产工作已有多年,经验丰富。</p>
           <p>1.能够精准的根据每一位客户的详细需求匹配到性价比合适的</p>
           <p>2.和业主议价是我的强项，让每位客户真正的省钱</p>
           <p>3.我们的服务能让您物超所值</p>
           <p>4.您的买房安家之旅,让您更加安心放心省心</p>
      </div>
    </main>
    <footer>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </footer>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Detail",
  data() {
    return {
      info: [],
    //   housingList:[
    //       {con:'单价',tit:'12100/平方米'},
    //       {con:'朝向',tit:'南'},
    //       {con:'装修',tit:'精装修'},
    //       {con:'楼层',tit:'高层/共18层'},
    //       {con:'类型',tit:'高层住宅'},
    //       {con:'更新',tit:'刚刚'},
    //   ]
    };
  },
  created() {
    this.id = this.$route.params.id;
    //调用函数
    this.getList();
  },
  methods: {
    //获取详情数据
    getList() {
      axios({
        url: "/api/newDetail",
        method: "post",
        data: {
          id: this.id
        }
      }).then(res => {
        this.info = res.data.data;
      });
    },
    //返回上一级
    back() {
      this.$router.push(`/newHouse`);
    },
    //进入VR页面
    VR() {
      this.$router.push(`/vr/${this.info.id}`)
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

body,
html,
.detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.detail main {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.detail main .logo {
  width: 100%;
  height: 260px;
}

.detail main .logo img {
  width: 100%;
  height: 100%;
}

.detail main .back {
  display: block;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.detail main .tit {
  font-size: 18px;
  font-weight: bold;
}

.detail main > p {
  font-size: 16px;
  margin-top: 5px;
  margin-left: 10px;
}

.detail main > p span {
  font-size: 14px;
  color: #ef827f;
  font-weight: bold;
}

.detail main .housing{
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #f7f7f7;
    margin-top: 16px;
}

.detail main .housing h3{
    margin-left: 10px;
}

.detail main .housing dl{
    float: left;
    width: 30%;
    height: 50px;
    /* text-align: center; */
    margin-top: 10px;
    margin-left: 10px;
}

.detail main .housing dl dt{
    color: #c1c0c0;
    font-size: 14px;
}

.detail main .housing dl dd{
    margin-top: 6px;
    font-size: 15px;
}

.detail main .features{
    width: 100%;
    height: 330px;
    margin-top: 6px;
}

.detail main .features h3{
    margin-left: 10px;
}

.detail main .features p{
    color: #8b898a;
    font-size: 13px;
    margin-left: 10px;
    margin-top: 6px;
}

.detail main .features .introduce {
    margin-left: 10px;
    font-size: 15px;
    font-weight: bold;
    margin-top: 10px;
    /* vertical-align: middle; */
    color: black;
    font-size: 15px;
}

.detail main .features .introduce span{
    color: #ef827f;
    font-weight: bold;
    font-size: 16px;
}

.detail footer {
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
}

.detail .vr{
  color: blueviolet;
}
</style>